<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="backstage/common/head::head"></head>
<style>
    #content-container:before {
        background: none;
    }

    .lay-win {
        display: none;
    }
</style>
<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->

<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <header id="navbar" th:replace="backstage/common/header::header"></header>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">
        <div id="content-container">
            <!--CONTENT CONTAINER-->
            <!--===================================================-->
            <div id="page-content">
                <button id="demo-btn-addrow" class="btn btn-purple" onclick="editHistorical(1,null)"><i
                        class="demo-pli-add"></i> 增加
                </button>
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th style="width:50px;">
                            序号
                        </th>
                        <th>
                            名称
                        </th>
                        <th>
                            版本
                        </th>
                        <th>
                            下载类型
                        </th>
                        <th>
                            下载地址
                        </th>
                        <th style="width:250px;">
                            操作
                        </th>
                    </tr>
                    </thead>
                    <tbody id="historical_tbody">
                    <!--<tr>
                        <td>1</td>
                        <td>a</td>
                        <td>index.html</td>
                        <td>
                            <button id="demo-btn-addrow" class="btn btn-info" onclick="editHistorical(0)"> 修改</button>
                            <button id="demo-btn-addrow" class="btn btn-danger"> 删除</button>
                        </td>
                    </tr>-->
                    </tbody>
                </table>

            </div>
        </div>
        <!--===================================================-->
        <!--END CONTENT CONTAINER-->

        <!--MAIN NAVIGATION-->
        <!--===================================================-->
        <nav id="mainnav-container" th:replace="backstage/common/left::left(1)"></nav>
        <!--===================================================-->
        <!--END MAIN NAVIGATION-->

    </div>


    <!-- FOOTER -->
    <!--===================================================-->
    <footer id="footer" th:replace="backstage/common/foot::footer"></footer>

    <!--===================================================-->
    <!-- END FOOTER -->


    <!-- SCROLL PAGE BUTTON -->
    <!--===================================================-->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
    <!--===================================================-->
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->
<div class="lay-win">
    <form class="form-horizontal">
        <input type="hidden" name="articleId" th:value="${artId}" id="artId" />
        <input type="hidden" name="id" id="downloadId" />
        <div class="panel-body">
            <div class="form-group">
                <label class="col-sm-3 control-label" for="input_name">软件名称</label>
                <div class="col-sm-6">
                    <input type="text" placeholder="请输入软件名称" class="form-control input-sm" id="input_name" name="name">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="input_version">版本</label>
                <div class="col-sm-6">
                    <input type="text" placeholder="请输入版本" class="form-control input-sm" name="version" id="input_version">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="input_version">是否最新版本</label>
                <div class="col-sm-6">
                    是：<input type="radio"  value="1" name="islatest" >
                    否：<input type="radio" value="0" name="islatest" >
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="input_type">下载类型</label>
                <div class="col-sm-6">
                    <input type="text" placeholder="请输入下载类型" class="form-control" name="type" id="input_type">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label" for="input_type">下载地址</label>
                <div class="col-sm-6">
                    <input type="text" placeholder="请输入下载地址" class="form-control" name="url" id="input_url">
                </div>
            </div>
        </div>
    </form>
</div>

</body>

<script>
    $(function () {
        var artId=$("#artId").val();
        historicalList(artId,0, 20);
    })

    var artId=$("#artId").val();

    /**
     * 打开编辑窗口
     * type 0修改 1新增
     **/
    function editHistorical(type, id) {
        if (type == 0) {
            findDownloadById(id);
        }
        layui.use('layer', function () {
            layui.layer.open({
                type: 1,
                area: ['800px'],
                content: $('.lay-win'),
                btn: ['保存', '取消'],
                yes: function (){
                    if (type == 0) {
                        updateHistorical(id);
                    }else {
                        saveHistorical()
                    }
                }
            })
        })
    }

    //加载字典表格
    function historicalList(artId,pageIndex, pageSize) {
        $.ajax({
            url: '/backstage/appDownload/downloadPage',
            type: 'get',
            data: {"artId":artId,"pageIndex": pageIndex, "pageSize": pageSize},
            success: function (res) {
                var data = "";
                if (res != null) {
                    $.each(res.list, function (i, n) {
                        data += `<tr>
                            <td>${n.id}</td>
                            <td>${n.name == null?"":n.name}</td>
                            <td>${n.version}</td>
                            <td>${n.type}</td>
                            <td>${n.url}</td>
                            <td>
                            <button id="demo-btn-addrow" class="btn btn-info" onclick="editHistorical(0,${n.id})"> 修改</button>
                            <button id="demo-btn-addrow" class="btn btn-danger" onclick="delHistorical(${n.id})"> 删除</button>
                            </td>
                            </tr>`;
                    });

                    $("#historical_tbody").html(data)
                } else {
                    console.log(111)
                }
            }
        });
    }

    //添加字典项
    function saveHistorical() {
        var url = '/backstage/appDownload/addDownload';
        var d = {};
        var vals = $(".form-horizontal").serializeArray();
        $.each(vals, function () {
            d[this.name] = this.value;
        });
        var data=JSON.stringify(d);
        $.ajax({
            url: url,
            type: 'post',
            data: data,
            contentType: 'application/json',
            success: function (res) {
                location.href = "/backstage/article/historicalVersion?artId="+artId;
            }
        });
    }

    //修改字典项
    function updateHistorical(id) {
        var url = '/backstage/appDownload/updateDownload';
        var d = {};
        var vals = $(".form-horizontal").serializeArray();
        $.each(vals, function () {
            d[this.name] = this.value;
        });
        var data=JSON.stringify(d);
        console.log("updaate",data)
        $.ajax({
            url: url,
            type: 'post',
            data: data,
            contentType: 'application/json',
            success: function (res) {
                location.href = "/backstage/article/historicalVersion?artId="+artId;
            }
        });
    }

    /**
     * 删除字典项
     * @param dictId 字典id
     */
    function delHistorical(id) {
        $.ajax({
            url: '/backstage/appDownload/delDownloadById',
            type: 'post',
            data: {"id": id},
            // contentType: 'application/json',
            success: function (res) {
                location.href = "/backstage/article/historicalVersion?artId="+artId;
            }
        });
    }

    function findDownloadById(id) {
        $.ajax({
            url: '/backstage/appDownload/findById',
            type: 'post',
            data: {"id": id},
            // contentType: 'application/json',
            success: function (res) {
                $('#input_url').val(res.url);
                $('#input_type').val(res.type);
                $('#input_version').val(res.version);
                $('#input_name').val(res.name);
                $('#artId').val(res.articleId);
                $('#downloadId').val(res.id);
            }
        });
    }


</script>

</html>